@use '@/asset/css/common/var' as *;
@use './theme-light.scss';
@use './theme-dark.scss';

$ax-color-base: #fff;
$ax-color-map: (
  g0: $ax-color-base,
  g3: darken($ax-color-base, 3%),
  g5: darken($ax-color-base, 5%),
  //g10: darken($ax-color-base, 10%),
  g10: #e5e5e5,
  g15: darken($ax-color-base, 15%),
  g20: darken($ax-color-base, 20%),
  g25: darken($ax-color-base, 25%),
  //g30: darken($ax-color-base, 30%),
  g30: #b2b2b2,
  g35: darken($ax-color-base, 35%),
  g40: darken($ax-color-base, 40%),
  g45: darken($ax-color-base, 45%),
  g50: darken($ax-color-base, 50%),
  g55: darken($ax-color-base, 55%),
  g60: darken($ax-color-base, 60%),
  g65: darken($ax-color-base, 65%),
  //g70: darken($ax-color-base, 70%),
  g70: #4a4a4a,
  //g75: darken($ax-color-base, 75%),
  g75: #3e3e3e,
  g80: darken($ax-color-base, 80%),
  //g85: darken($ax-color-base, 85%),
  g85: #252525,
  g90: darken($ax-color-base, 90%),
  g95: darken($ax-color-base, 95%),
  g100: darken($ax-color-base, 100%),
);

:root,
html {
  @each $name, $value in $ax-color-map {
    #{makeAppVar(ax-color, $name)}: $value;
  }
}
